{extend name="default/layout" /}

{block name="css"}
<style>
    .news-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .news-item {
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .news-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .news-image {
        height: 200px;
        width: 100%;
        object-fit: cover;
    }

    .news-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 0.875rem;
    }

    .news-meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .news-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .news-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.6;
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }

    @media (min-width: 768px) {
        .news-item {
            display: flex;
            flex-direction: row;
        }

        .news-image-container {
            flex: 0 0 30%;
        }

        .news-content {
            flex: 1;
            padding: 20px;
        }

        .news-image {
            height: 100%;
            min-height: 200px;
        }
    }

    @media (max-width: 767px) {
        .news-content {
            padding: 15px;
        }
    }
</style>
{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 面包屑导航 -->
    <div class="flex items-center text-sm text-gray-500 mb-6">
        <a href="/" class="hover:text-blue-600">首页</a>
        <span class="mx-2">/</span>
        {if $category.pid > 0 && isset($parent_category)}
        <a href="{$parent_category.url}" class="hover:text-blue-600">{$parent_category.name}</a>
        <span class="mx-2">/</span>
        {/if}
        <span class="text-blue-600">{$category.name}</span>
    </div>

    <!-- 分类标题 -->
    <div class="mb-8 text-center">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">{$category.name}</h1>
        {if $category.seo_description}
        <p class="text-lg text-gray-500 max-w-3xl mx-auto">{$category.seo_description}</p>
        {/if}
    </div>

    <!-- 子分类导航 -->
    {if $children && count($children) > 0}
    <div class="mb-8">
        <div class="bg-white rounded-sm p-4 ">
            <h2 class="text-lg font-semibold text-gray-800 mb-3">相关分类</h2>
            <div class="flex flex-wrap gap-2">
                {volist name="children" id="child"}
                <a href="{$child.url}" class="px-4 py-2 rounded-full border border-gray-200 hover: transition-colors">
                    {if $child.pic}
                    <img src="{$child.pic}" alt="{$child.name}" class="w-4 h-4 inline-block mr-1 rounded-full">
                    {/if}
                    <span>{$child.name}</span>
                    {if $child.goods_count > 0}
                    <span class="text-xs text-gray-500 ml-1">({$child.goods_count})</span>
                    {/if}
                </a>
                {/volist}
            </div>
        </div>
    </div>
    {/if}

    <!-- 新闻列表 -->
    {if $goods_list && count($goods_list) > 0}
    <div class="news-list">
        {volist name="goods_list" id="item"}
        <div class="news-item bg-white ">
            <div class="news-image-container">
                {if $item.slider_image && count($item.slider_image) > 0}
                <img src="{$item.slider_image[0]}" alt="{$item.name}" class="news-image">
                {else}
                <div class="news-image  flex items-center justify-center">
                    <span class="text-gray-500">暂无图片</span>
                </div>
                {/if}
            </div>

            <div class="news-content">
                <h3 class="text-xl font-semibold text-gray-800">
                    <a href="{$item.url}" class="hover:text-blue-500 transition-colors">{$item.name}</a>
                </h3>

                <div class="news-meta text-gray-500">
                    <div class="news-meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>{$item.create_time|date='Y-m-d'}</span>
                    </div>
                    <div class="news-meta-item">
                        <i class="far fa-eye"></i>
                        <span>{$item.views|default=0} 阅读</span>
                    </div>
                    {if $item.price > 0}
                    <div class="news-meta-item text-blue-500">
                        <i class="fas fa-yen-sign"></i>
                        <span>{$item.price}</span>
                    </div>
                    {else}
                    <div class="news-meta-item text-green-500">
                        <i class="fas fa-unlock"></i>
                        <span>免费</span>
                    </div>
                    {/if}
                </div>

                <div class="news-excerpt text-gray-500">
                    {$item.description|default=$item.content|strip_tags|mb_substr=0,150}...
                </div>

                <div class="mt-3">
                    <a href="{$item.url}"
                        class="inline-flex items-center px-4 py-2 border border-gray-200 rounded-md text-sm font-medium text-gray-800 hover: transition-colors">
                        阅读全文 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
        {/volist}
    </div>

    <!-- 分页 -->
    {if $total > $per_page}
    <div class="pagination-container">
        <div class="flex items-center justify-between   border-gray-200 bg-white px-4 py-3 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                {if $current_page > 1}
                <a href="?page={$current_page-1}"
                    class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-800 bg-white hover:bg-gray-50">
                    上一页
                </a>
                {/if}
                {if $current_page < ceil($total / $per_page)} <a href="?page={$current_page+1}"
                    class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-800 bg-white hover:bg-gray-50">
                    下一页
                    </a>
                    {/if}
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-500">
                        显示 <span class="font-medium">{($current_page-1)*$per_page+1}</span> 到 <span
                            class="font-medium">{min($current_page*$per_page, $total)}</span> 条，共 <span
                            class="font-medium">{$total}</span> 条结果
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md  -space-x-px" aria-label="Pagination">
                        {if $current_page > 1}
                        <a href="?page={$current_page-1}"
                            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-800 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        {/if}

                        {for start="1" end="min(ceil($total/$per_page)+1, 10)"}
                        <a href="?page={$i}"
                            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium {if $current_page == $i}text-blue-500{else}text-gray-800 hover:bg-gray-50{/if}">
                            {$i}
                        </a>
                        {/for}

                        {if ceil($total/$per_page) > 9}
                        <span
                            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-800">
                            ...
                        </span>
                        {/if}

                        {if $current_page < ceil($total / $per_page)} <a href="?page={$current_page+1}"
                            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-800 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                            </a>
                            {/if}
                    </nav>
                </div>
            </div>
        </div>
    </div>
    {/if}

    {else}
    <!-- 无内容提示 -->
    <div class="py-12 text-center text-gray-500">
        <i class="fas fa-newspaper text-5xl mb-4"></i>
        <p class="text-lg">暂无内容</p>
    </div>
    {/if}
</div>
{/block}

{block name="js"}
<script>
    $(document).ready(function () {
        // 图片懒加载
        const lazyImages = document.querySelectorAll('.news-image');
        if ('IntersectionObserver' in window) {
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        if (img.dataset.src) {
                            img.src = img.dataset.src;
                            img.removeAttribute('data-src');
                        }
                        imageObserver.unobserve(img);
                    }
                });
            });

            lazyImages.forEach(img => {
                imageObserver.observe(img);
            });
        } else {
            // 降级处理
            lazyImages.forEach(img => {
                if (img.dataset.src) {
                    img.src = img.dataset.src;
                    img.removeAttribute('data-src');
                }
            });
        }
    });
</script>
{/block}